<template>
  <div class="table-box">
    <div class="form-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="流程名称：">
          <el-input v-model="Varname" placeholder=""></el-input>
        </el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form>
    </div>
    <div class="center">
      <el-table
        :data="processList"
        border
        :maxHeight="table.props.height"
        @selection-change="">
        <el-table-column
          type="index"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="id"
          label="流程定义ID"
        >
        </el-table-column>
        <el-table-column
          prop="deploymentId"
          label="流程部署ID"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="key"
          label="流程key"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="流程描述">
        </el-table-column>
        <el-table-column
          prop="version"
          label="版本号"
        >
        </el-table-column>
        <el-table-column
          prop="category"
          label="分类编码"
        >
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="startProcess(scope.row)" type="text" size="small">启动</el-button>
            <el-button @click="designProcess(scope.row)" type="text" size="small">设计</el-button>
            <el-button @click="deleteProcess(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box mt20 text-right">
      <el-pagination
        @current-change="query"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Config from '../config'

  const tableH = document.body.offsetHeight - 245;
  export default {
    name: 'ProcessList',
    data() {
      return {
        table: {
          props: {
            height: document.body.offsetHeight - 245
          }
        },
        processList: [],
        total: 0,
        currentPage: 1,
        size: 10,
        Varname: ''
      }
    },
    created: function () {
      this.init();
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        const tableH = document.body.offsetHeight - 245;
        this.table.props.height = tableH;
        this.query();
      },
      //启动流程
      startProcess: function (row) {
        this.$http.post(Config.url + "runtime/process-instances", {"processDefinitionKey": row.key}).then(function (data) {
          var result = data.data.id;
          var message;
          if (result != null) {
            message = "启动成功";
          } else {
            message = "启动失败";
          }
          this.$message({
            message: message,
            type: 'warning'
          });
        })
      },
      //删除流程
      deleteProcess: function (row) {
        var that = this;
        this.$http.get(Config.url + "runtime/process-instances?processDefinitionId=" + row.id).then(function (data) {
          if (data.data.total != 0) {
            that.$confirm("该流程下有" + data.data.total + "个流程实例正在运行，确认删除吗？", "提示", {
              type: 'warning'
            }).then(function () {
              that.$http.delete(Config.url + "repository/deployments/" + row.deploymentId + "?cascade=true").then(function (data) {
                that.$message({
                  message: "删除成功",
                  type: 'warning'
                });
                //document.location.reload();
                that.query();
              })
            })
          } else {
            that.$http.delete(Config.url + "repository/deployments/" + row.deploymentId).then(function (data) {
              that.$message({
                message: "删除成功",
                type: 'warning'
              });
              //document.location.reload();
              that.query();
            })
          }
        })
      },
      //设计
      designProcess: function (row) {
        var processDefinitionId = row.id;
        if (processDefinitionId != null && processDefinitionId != "undefined") {
          processDefinitionId = processDefinitionId.replace(/:/g, "%3a");
          //window.location.href = "../html/diagram.html?processDefinitionId=" + processDefinitionId;
          this.$router.push({
            name: 'Diagram',
            params: {
              processDefinitionId: processDefinitionId
            }
          })
        }
      },
      //查询 包括分页查询 条件查询
      query: function (data) {
        const that = this;
        var Vstart = 0;
        if (data != undefined && !isNaN(data)) {
          Vstart = (data - 1) * 10;
        }
        const params = {
          start: Vstart,
          order: 'desc',
          sort: 'deploymentId'
        };
        if (this.Varname !== "") {
          params.nameLike = "%" + that.Varname + "%";
        }
        this.$http.get(Config.url + "repository/process-definitions", {params}).then(function (data) {
          that.processList = data.data.data;
          that.total = data.data.total;
        }, function (response) {
          console.info(response);
        })

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
